<template>
    <div class="input-select">
        <input v-model="newValue" class="form-control"  @focus="show = true" @blur="show = false"/>
        <transition name="fade">
            <ul class="list-style-none" v-if="options.length" v-show="show">
                <li  :key="'option' + index" v-for="(option, index) in options" @click="newValue = option.value">{{option.label}}</li>
            </ul>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "InputSelect",
        props: {
            value: {
                type : String,
                default : ''
            },
            options: {
                type : Array,
                default : () => []
            }
        },
        data() {
            return {
                show: false,
                newValue: ''
            }
        },
        watch: {
            newValue() {
                this.$emit("input", this.newValue)
            },
            value() {
                this.newValue = this.value
            }
        }
    }
</script>

<style scoped lang="stylus">
    .input-select
        position : relative;
        ul
            width : 100%
            position : absolute;
            left : 0
            top : 40px;
            border-bottom-radius : 10px;
            background : #fff
            z-index : 100
            li
                cursor : pointer;
                border-bottom : 1px solid #f1f1f1
                padding : 5px;
                &:hover
                    background : #f1f1f1


</style>